<template>
	<div>
		<h2>
			{{ datas.text }}
		</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<div class="title">添加图片</div>
					<el-form ref="form" label-width="100px">
						<el-form-item label="图片: ">
							<div class="sd-flex">
								<div class="choice-image choice-image-delete" @click="FileChoiceRef.openFileChoiceDialog">
									<el-image v-if="datas.src != ''" :src="STATIC_URL + datas.src" fit="cover" class="cover-image" />
									<el-icon v-else>
										<ele-Plus />
									</el-icon>

									<div class="delete-content" @click.stop="datas.src = ''" v-if="datas.src != ''">
										<SvgIcon name="ele-DeleteFilled"></SvgIcon>
									</div>
								</div>
								<div class="ml10 tip">建议宽度：750</div>
							</div>
						</el-form-item>
						<el-form-item label="链接">
							<el-input v-model="datas.url">
								<template #append> <el-button class="ml5 mr5" @click="openDataPage">选择</el-button> </template>
							</el-input>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup lang="ts" name="pictureshowstyle">
import { defineAsyncComponent, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();
const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));

const PageDataRef = ref();

const props = defineProps({
	datas: {},
});

const choiceFile = (res: any) => {
	// console.log('prefix: ', this.prefix);
	// res.visitRelativePath;
	props.datas.src = res[0].visitRelativePath;
};

const openDataPage = () => {
	console.log('data page');
	PageDataRef.value.openDialog();
};
const choicePage = (res: any) => {
	props.datas.url = res.urlContent;
};
</script>

<style scoped>
.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}
</style>
